<template>
  <!-- 关系图graph -->
  <div>
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Ecolors from '@/utils/chartColors'
import {resize, spaceTxt, toolboxFullScreen} from '@/utils/utils'
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String
    },
    chartData: {
    }
  },
  data() {
    return {
      chart: null,
      colors: [],
      seriesData: [],
    }
  },
  computed: {
    ...mapState(['curChartConfig'])
  },
  methods: {
    getCurChartConfig() {
      if (Object.keys(this.curChartConfig).length > 0) {
        let colors = []
        this.curChartConfig.colors.forEach(v => {
          colors.push(v.color)
        })
        this.colors = [...colors, ...Ecolors.color]
      }
      if (Object.keys(this.chartData).length > 0) {
        this.init()
      }
    },
    getSeriesData() {
      let seriesData = []
      let nodes = this.chartData.nodes
      let links = this.chartData.links

      let maxArr = []
      // 文字过长换行
      nodes.forEach((v, i) => {
        v.itemStyle = {
          color: this.colors[i]
        }
        v.label = {
          show: true,
          color: "#666666"
        }
        maxArr.push(v.value)
      })
      let max = Math.max(...maxArr)
      nodes.forEach(v => {
        if (v.value !== 0) {
          v.symbolSize = 30 * (Math.log(v.value)/Math.log(max)) + 10
        } else {
          v.symbolSize = 20
        }
        
      })
      seriesData.push({
        type: 'graph',
        layout: 'circular',
        circular: {
          rotateLabel: true
        },
        roam: true,
        focusNodeAdjacency: true,
        data: nodes,
        links,
        label: {
          position: 'right',
          formatter: '{b}'
        },
        lineStyle: {
          color: '#9e9e9e',
          curveness: 0.2, // Math.random()
        }
      })
      return seriesData
    },
    init() {
      let seriesData = this.getSeriesData()
      // 背景色
      let backgroundColor =  this.curChartConfig['showBgColor'].checked ? this.curChartConfig['showBgColor'].color :'#fff'
      let option = {
        tooltip: {
          confine: true,
          show: true,
          trigger: 'item',
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            color: "#000"
          },
          formatter: (params) => {
            let dataType = params.dataType
            let marker = params.marker
            let data = params.data
            if (dataType === 'node') {
              return `${marker}${data.name}`
            }
            if (dataType === 'edge') {
              return `<span style="color:#6579ee;">${data.source}</span> 与 <span style="color:#6579ee;">${data.target}</span><br/>
              合作 <span style="color:#6579ee;">${data.value}</span> 项专利`
            }
            
          }
        },
        width: '30%',
        backgroundColor,
        
        series: seriesData
      }
      this.chart.clear()
      this.chart.setOption(option, true)

      this.$emit('chartDom', this.chart)

      // 后台报告下载
      this.chart.on('finished', () => {
        // let tempId = this.$route.query.tempId
        // if (tempId) {
        // }
        this.getEchartImg(this.chart.getDataURL())
      })
    },
    getEchartImg(base) {
      window.echartImg = base
    }
  },
  watch: {
    curChartConfig: {
      deep: true,
      handler: function() {
        this.getCurChartConfig()
      }
    },
    chartData() {
      if (Object.keys(this.chartData).length <= 0) {
        if (this.chart) this.chart.clear()
      } else {
        this.getCurChartConfig()
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.chartId))
    this.getCurChartConfig()
  },
  destroyed() {
    this.chart.dispose()
    this.chart = null
  }
}
</script>

<style lang="scss" scoped>
.chart {
  // height: 800px;
  // background-color: #fff;
}
</style>